<template>
  <div @click="clicked">
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <span class="mouser" @click="goUrl('/')">
          <i class="el-icon-s-home"></i>首页
        </span>
        <span class="mouser" @click="goUrl('/shopping/shopcar')">
          <i class="el-icon-shopping-cart-full"></i>购物车
        </span>
        <i v-if="num===0" class="el-icon-message-solid menu-icon"></i>
        <el-badge v-else :value="num" class="item">
          <el-popover placement="bottom" width="180" trigger="click">
            <p v-for="(item, index) in list" :key="index">
              <span v-if="item.type==='invest'">充值申请被</span>
              <span v-else-if="item.type==='care'">寄养申请被</span>
              <span v-else-if="item.type==='long'">延长申请被</span>
              <span v-else-if="item.type==='back'">领回申请被</span>
              <span v-else-if="item.type==='upload'">投稿申请被</span>

              <span v-if="item.status==='yes'">同意啦！</span>
              <span v-else-if="item.status==='refuse'">拒绝啦！</span>
              <span v-else-if="item.status==='agreed'">同意啦！</span>
              <span v-else-if="item.status==='refused'">拒绝啦！</span>
              <span v-else-if="item.status==='end'">同意啦！</span>
              <i
                  class="el-icon-circle-close"
                  style="margin-left:30px;cursor: pointer;"
                  @click="goRead(item)"
              ></i>
            </p>
            <p style="text-align:center; margin-bottom:0;">
              <el-button size="mini" @click="goAllRead">全部已读</el-button>
            </p>
            <i class="el-icon-message-solid menu-icon" slot="reference"></i>
          </el-popover>
        </el-badge>
        <el-dropdown @command="goUrl">
          <span class="mouser">{{$store.state.nickname}}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="/shopping/person">个人中心</el-dropdown-item>
            <el-dropdown-item command="/shopping/cost">充值</el-dropdown-item>
            <el-dropdown-item command="/login">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-container :style="conHeight">
        <el-scrollbar class="scroll">
          <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu
                style="text-align:left"
                :default-active="$route.path"
                :unique-opened="true"
                router
            >
              <NavMenu :navlist="menuList"></NavMenu>
            </el-menu>
          </el-aside>
        </el-scrollbar>

        <el-scrollbar style="height:100%;width:100%;">
          <el-main style="height:100%;width:100%;">
            <router-view></router-view>
          </el-main>
        </el-scrollbar>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from "@common/NavMenu";
import Menulist from "@assets/munelist.js";
import { mapMutations } from "vuex";
export default {
  name: "app",
  components: {
    NavMenu
  },
  data() {
    return {
      menuList: Menulist.navlist,
      conHeight: {
        height: "",
        border: "1px solid #eee"
      },
      num: 0,
      list: [],
      timer: "",
      lastTime: new Date().getTime(), // 最后一次点击的时间
      outTime: 2 * 60 * 60 * 1000 //超时时间2h
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.getUnRead();
    this.getUserInfo();
  },
  mounted() {
    //每隔十分钟判断一次有无操作
    this.timer = setInterval(this.tTime, 1000*60*10);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    ...mapMutations(["delToken"]),
    getUserInfo() {
      this.axios
          .get("/api/user/get", {
            headers: {
              Authorization: `Bearer ${this.$store.state.token}`
            }
          })
          .then(res => {
            if (res.data.success) {
              const customer = res.data.data; // 假设数据在 data 字段中
              this.$store.commit("setPermissions", customer.permission); // 更新权限到 Vuex
            }
          })
          .catch(err => {
            console.error("获取用户信息失败:", err);
          });
    },
    getUnRead() {
      this.axios
          .get("/api/index/getunread", {
            params: {
              username: this.$store.state.username
            },
            headers: {
              Authorization: `Bearer ${this.$store.state.token}`
            }
          })
          .then(res => {
            if (res.data.success) {
              var message = res.data;
              this.num = message.total;
              this.list = message.message;
            }
          });
    },
    goRead(row) {
      let refobs = [];
      if (row.investid) {
        refobs = [
          {
            investid: row.investid
          }
        ];
      }
      if (row.careid) {
        refobs = [
          {
            careid: row.careid
          }
        ];
      }
      this.read(refobs);
    },
    goAllRead() {
      let refobs = [];
      for (let i in this.list) {
        if (this.list[i].investid) {
          refobs.push({
            investid: this.list[i].investid
          });
        }
        if (this.list[i].careid) {
          refobs.push({
            careid: this.list[i].careid
          });
        }
      }
      this.read(refobs);
    },
    read(refobs) {
      this.axios
          .put("/api/index/read", {
            refobs
          })
          .then(res => {
            if (res.data.success) {
              this.getUnRead();
            }
          });
    },
    goUrl(url) {
      if (url === "/login") {
        this.delToken();
      }
      this.$router.push(url);
    },
    getHeight() {
      this.conHeight.height = window.innerHeight - 60 + "px";
    },
    clicked() {
      this.lastTime = new Date().getTime(); //当界面被点击更新点击时间
    },
    tTime() {
      let nowTime = new Date().getTime();
      if (nowTime - this.lastTime > this.outTime) {
        clearInterval(this.timer);
        this.delToken();
        this.$router.push("/login");
      }
    }
  }
};
</script>

<style scoped>
.el-header {
  background-color: rgba(163, 206, 236, 0.808);
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
.mouser {
  cursor: pointer;
  margin-right: 10px;
}
.scroll {
  height: 100%;
  width: 220px;
}
.menu-icon {
  font-size: 18px;
  margin-right: 15px;
  cursor: pointer;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden !important;
}
.el-scrollbar >>> .el-scrollbar__view {
  height: 100% !important;
}
</style>
